<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox  color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>
		
		<view class="container" >	
			<view class="top">
				<scroll-view 
					class="scroll-view_H" 
					scroll-x="true" 
					scroll-left="0" 
					v-for="(item,index) in cartList"
					:key="index"
				>
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group @change="goodsCheck(index)">
									<checkbox
										color="#FF6040" 
										:checked="item.status"
										value="1"
									/>
								</checkbox-group>
								
								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>
		
							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥200</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="desc(index)">－</label>
									<label >{{item.num}}</label>
									<label @click="asc(index)">＋</label>
								</view>
							</view>
						</view>
		
					</view>
					<view class="cartDel" id="demo2" @click="del(item.id,index)">
						<label for="">删除</label>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group  @change="changeAll">
						<checkbox  color="#FF6040" value="1"  :checked="checkAll"  />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{totalPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="goOrder">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{totalNum}}件)</label>
				</view>
			</view>
		
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>

	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components:{cartnull},
		data() {
			return {
				cartList:[],//初始化购物车数据
				buffer: true, //检测购物车是否有数据
			}
		},
		// 页面显示时
		async onShow() {
			let res = await this.$isLogin(this);  // 布尔值
			if(res){
				this.getCartList()
			}else{  // 未登录状态
				uni.showToast({
					title:'请先登录',
					icon:'error'
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'../login/login'
					})
				},2000)
			}
			
		},
		computed:{
			// 全选状态
			checkAll(){
				let tag = this.cartList.every((item)=>{  // 全真为真，只要有一个事假就返回false
					return item.status
				})
				return tag
			},
			// 计算总价
			totalPrice(){
				let totel = 0;
				this.cartList.forEach((item)=>{
					if(item.status){
						totel += item.num * item.price
					}
				})
				return totel
			},
			// 计算总件数
			totalNum(){
				let num = 0;
				this.cartList.forEach((item)=>{
					if(item.status){
						num += item.num
					}
				})
				return num
			}
		},
		methods:{
			// 去到结算页面
			goOrder(){
				let checkGoods = this.cartList.filter((item)=>{
					return item.status
				})
				if(checkGoods.length==0){
					uni.showToast({
						title:'至少要有一件商品',
						icon:'error'
					})
					return
				}
				uni.setStorageSync('carts',{carts:checkGoods,totalPrice:this.totalPrice,totalNum:this.totalNum})
				uni.navigateTo({
					url:'../order/order'
				})
			},
			// 删除数据
			del(id,index){
				// console.log(index);
				uni.showModal({
					title:'重要提醒',
					content:'你要删除购物车信息',
					success:async (res)=>{
						if(res.confirm){
							let {token} = this.$store.state.userinfo
							let options = {
								url:'/api/cartdelete',
								method:'POST',
								data:{id},
								header:{authorization:token}
							}
							let res = await this.$http(options)
							if(res.data.code == 200){
								uni.showToast({
									title:'删除成功'
								})
								this.cartList.splice(index,1)
								console.log(this.cartList);
							}else{
								uni.showToast({
									title:'删除失败',
									icon:'error'
								})
							}
						}
					}
				})
			},
			// 商品减一
			desc(index){
				if(this.cartList[index].num>1){
					this.cartList[index].num--
					let id = this.cartList[index].id
					this.editCart(id,1)
				}else{
					uni.showToast({
						title:'不能再少了~',
						icon:'error'
					})
				}
				
			},
			// 商品加一
			asc(index){
				this.cartList[index].num++
				let id = this.cartList[index].id
				this.editCart(id,2)
			},
			// 修改购物车
			async editCart(id,type){
				let {token} = this.$store.state.userinfo
				let options = {
					url:'/api/cartedit',
					method:'POST',
					data:{
						id,
						type
					},
					header:{
						authorization:token
					}
				}
				let res = await this.$http(options)
				if(res.data.code==200){
					uni.showToast({
						title:'操作成功'
					})
				}else{
					uni.showToast({
						title:'操作失败'
					})
				}
			},
			// 点击商品前面的复选框
			goodsCheck(index){
				this.cartList[index].status = !this.cartList[index].status
				console.log(this.cartList);
			},
			// 全选按钮
			changeAll(e){
				let tag = e.detail.value.length>0?true:false
				this.cartList.forEach((item)=>{
					item.status = tag
				})
			},
			// 获取购物车列表
			async getCartList(){
				let {token,uid} = uni.getStorageSync('userinfo')
				let options = {
					url:'/api/cartlist',
					data:{
						uid
					},
					header:{
						authorization:token
					}
				}
				let res = await this.$http(options)
				console.log(res);
				if(res.data.code==200){
					if(res.data.list!=null){
						res.data.list.forEach((item)=>{
							item.img = this.$baseUrl + item.img
						})
						res.data.list.forEach((item)=>{
							item.status = item.status==1?true:false
						})
						this.cartList = res.data.list
						this.buffer = true
						console.log(this.cartList);
					}else{
						this.buffer = false
					}
					
				}else{
					uni.showToast({
						title:'请求失败',
						icon:'error'
					})
				}
			}
		}
}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
